<template>
    <BaseContent>
        <div class="card mb-3 recomment_info" style="max-width: 540px;" v-for="recomment in filter_filter_recomment_book" :key="recomment.id">
            <div class="row g-0">
                <div class="col-md-4">
                    <img :src="recomment.photo" class="img-fluid rounded-start" alt="...">
                </div>
                <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">{{ recomment.title }}</h5>
                    <p class="card-text"><small class="text-muted">{{ recomment.author }}</small></p>
                    <p class="card-text book_description">{{ recomment.description }}</p>
                    <p class="card-text"><small class="text-muted" v-if="recomment.score >= 0 && recomment.score <= 200">推荐值 {{ 80 + (recomment.score / 10) }}%</small></p>
                    <p class="card-text"><small class="text-muted" v-if="recomment.score > 200 && recomment.score <= 300">推荐值 {{ 70 + (recomment.score / 10) }}%</small></p>
                    <p class="card-text"><small class="text-muted" v-if="recomment.score > 300 && recomment.score <= 400">推荐值 {{ 60 + (recomment.score / 10) }}%</small></p>
                    <p class="card-text"><small class="text-muted" v-if="recomment.score > 400 && recomment.score <= 500">推荐值 {{ 50 + (recomment.score / 10) }}%</small></p>
                    <p class="card-text"><small class="text-muted" v-if="recomment.score > 500 && recomment.score <= 600">推荐值 {{ 50 + (recomment.score / 10) }}%</small></p>
                    <p class="card-text"><small class="text-muted" v-if="recomment.score > 600 && recomment.score <= 700">推荐值 {{ 30 + (recomment.score / 10) }}%</small></p>
                    <p class="card-text"><small class="text-muted" v-if="recomment.score > 700">推荐值 {{ 90 + (recomment.score / (recomment.score / 10)) }}%</small></p>
                    <button type="button" class="btn btn-success" @click="go_to_read(recomment.id)">立即阅读</button>
                </div>
                </div>
            </div>
        </div>
    </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import $ from 'jquery';
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name: "RecommendView",
    components: {
        BaseContent
    },
    setup() {
        const store = useStore();
        const count = ref(0);
        const my_favorite_book = ref([]);
        const recomment_book = ref([]);
        const filter_recomment_book = ref([]);
        const the_top_four = ref([]);
        const filter_filter_recomment_book = ref([]);
        const router = useRouter();
        $.ajax({
            url: "http://47.121.28.202:8000/settings/ranking/",
            type: "GET",
            data: {
                user_id: store.state.user.id,
            },
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                for (let i of resp) {
                    if (count.value < 4) {
                        the_top_four.value.push(i);
                        count.value ++;
                    }
                }
                count.value = 0;
                for (let i of resp) {
                    if (count.value < 1) {
                        my_favorite_book.value.push(i);
                    }
                }
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/getbooks/",
                    type: "GET",
                    success(resp) {
                        if (my_favorite_book.value.length !== 0) {
                            for (let j of resp) {
                                if (j.book_type === my_favorite_book.value[0].book_type && j.awarded === my_favorite_book.value[0].book_awarded) {
                                    recomment_book.value.push(j);
                                }
                            }
                            $.ajax({
                                url: "http://47.121.28.202:8000/settings/borrowedbooks/",
                                type: "GET",
                                data: {
                                    user_id: store.state.user.id,
                                },
                                headers: {
                                    'Authorization': "Bearer " + store.state.user.access,
                                },
                                success(resp) {
                                    count.value = 0;
                                    for (let k of recomment_book.value) {
                                        const is_have = ref(false)
                                        for (let l of resp) {
                                            if (k.title === l.bookname) {
                                                is_have.value = true;
                                                break;
                                            }
                                        }
                                        if (!is_have.value) {
                                            filter_recomment_book.value.push(k);
                                        }
                                    }
                                    for (let k of filter_recomment_book.value) {
                                        const is_have = ref(false);
                                        for (let l of the_top_four.value) {
                                            if (k.title === l.book_title) {
                                                is_have.value = true;
                                                break;
                                            }
                                        }
                                        if (!is_have.value && count.value < 4) {
                                            filter_filter_recomment_book.value.push(k);
                                            count.value ++;
                                        }
                                    }
                                    if (filter_filter_recomment_book.value.length === 0) {
                                        $.ajax({
                                            url: "http://47.121.28.202:8000/settings/getranking/",
                                            type: "GET",
                                            success(resp) {
                                                count.value = 0;
                                                for (let i of resp) {
                                                    if (i.awarded === my_favorite_book.value[0].book_awarded && count.value < 4) {
                                                        filter_filter_recomment_book.value.push(i);
                                                        count.value ++;
                                                    }
                                                }
                                            }
                                        })
                                    }
                                }
                            })
                        } else {
                            router.push({
                                name: 'likeempty',
                            })
                        }
                    }
                })
            }
        })

        const go_to_read = (bookid) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'bookinfo',
                    params: {
                        bookid
                    }
                })
            }
            else {
                router.push ({
                    name: 'login',
                })
            }
        }

        return {
            filter_filter_recomment_book,
            go_to_read
        }
    }
}
</script>

<style scoped>
.errorinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.book_description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recomment_info {
    display: inline-block;
    margin: 20px;
    position: relative;
    left: 50px;
    width: 540px;
}
.ol-md-4 {
    width: 300px;
}
.img-fluid {
    height: 300px;
}
.btn-success {
    width: 100%;
}
</style>